<template>
  <div class="version-container">
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
        <el-breadcrumb-item>FAQ</el-breadcrumb-item>
        <el-breadcrumb-item>{{ question }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <div class="left">
        <div class="title">How to Download the Latest Version APK</div>
        <div class="version-content">
          <div class="version-item">
            <h2>Current Version</h2>
            <p>v1.0.0</p>
            <p class="release-date">Release Date: 2024-03-20</p>
          </div>
    
          <div class="version-item">
            <h2>Version Update Content</h2>
            <ul>
              <li>Initial version release</li>
              <li>Basic features implementation</li>
              <li>User interface optimization</li>
            </ul>
          </div>
    
          <div class="version-item">
            <h2>Download Guide</h2>
            <ol class="download-steps">
              <li>
                <h3>Step 1: Visit Download Page</h3>
                <p>Open your browser and visit our download page</p>
              </li>
              <li>
                <h3>Step 2: Find Latest Version</h3>
                <p>On the app details page, you can find:</p>
                <ul>
                  <li>App name</li>
                  <li>Version number</li>
                  <li>Update log</li>
                  <li>Download button</li>
                </ul>
              </li>
              <li>
                <h3>Step 3: Enable Unknown Sources</h3>
                <p>Before installing the APK file, you need to:</p>
                <ul>
                  <li>Open device settings</li>
                  <li>Go to security or privacy settings</li>
                  <li>Enable "Unknown Sources" option</li>
                </ul>
              </li>
              <li>
                <h3>Step 4: Download and Install</h3>
                <p>Click the download button and follow the prompts to complete installation</p>
              </li>
            </ol>
          </div>
    
          <div class="version-item">
            <h2>Important Notes</h2>
            <ul class="important-notes">
              <li>Please ensure to download the app from official sources</li>
              <li>Check device compatibility before installation</li>
              <li>It's recommended to backup important data before updating</li>
            </ul>
          </div>
        </div>
      </div>
      <TopDownloads />
    </div>
  </div>
</template>

<script setup>
import TopDownloads from '@/components/TopDownloads.vue'
const route = useRoute()
const question = route.query.question
</script>

<style scoped lang="scss">
.version-container {
  /* max-width: 800px; */
  margin: 0 auto;
  /* padding: 20px; */
  .content {
    display: flex;
    gap: 5rem;
    margin-top: 2rem;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: 0;
    }
    .title {
      @include title;
    }
  }
}

.version-content {
  margin-top: 30px;
}

.version-item {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.version-item h2 {
  color: #333;
  margin-bottom: 15px;
  font-size: 1.2em;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
}

.version-item h3 {
  color: #444;
  margin: 15px 0 10px;
  font-size: 1.1em;
}

.version-item p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 10px;
}

.release-date {
  color: #888;
  font-size: 0.9em;
}

.version-item ul {
  list-style-type: disc;
  padding-left: 20px;
  color: #666;
  line-height: 1.6;
}

.version-item li {
  margin-bottom: 8px;
}

.download-steps {
  list-style-type: none;
  padding-left: 0;
}

.download-steps li {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 6px;
}

.important-notes {
  color: #d9534f;
}

.important-notes li {
  margin-bottom: 10px;
  font-weight: 500;
}
</style>